<template>
	<view class="page-order-return">
		<view class="module">
			<view class="module-header">退货原因</view>
			<view class="module-input">
				<view class="uni-list-cell-db">
					<picker
						@change="bindPickerChange"
						:value="reasonIndex"
						:range="reasonArr"
					>
						<view v-if="reasonIndex == ''" class="input-select">
							请选择退货原因
							<text class="iconfont iconjiantou"></text>
						</view>
						<view v-else class="input-select">
							{{ reasonArr[reasonIndex] }}
							<text class="iconfont iconjiantou"></text>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="module">
			<view class="module-header">问题描述</view>
			<view class="module-input">
				<textarea class="input-textarea" auto-height />
			</view>
		</view>
		<view class="module">
			<view class="module-header">上传凭证（最多3张）</view>
			<view class="module-image">
				<view class="item" v-for="(item, index) in imgArr" :key="index">
					<image class="media-object" :src="item" mode="widthFix"></image>
				</view>
				<view class="item button-upload" @tap="handleChoose">+</view>
			</view>
		</view>
		<view class="module">
			<view class="module-header">联系方式</view>
			<view class="module-input">
				<view class="uni-form-item">
					<view class="title">联系人：</view>
					<input class="uni-input" placeholder="请输入联系人" />
				</view>
				<view class="uni-form-item">
					<view class="title">联系电话：</view>
					<input class="uni-input" placeholder="请输入联系电话" />
				</view>
			</view>
		</view>
		<view class="module-button"><button type="main">提交</button></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			reasonIndex: '',
			reasonArr: ['下错单了', '不想买了', '其他'],
			imgArr: [],
		};
	},
	onLoad() {},
	methods: {
		bindPickerChange: function (e) {
			this.reasonIndex = e.target.value;
		},
		handleChoose() {
			uni.chooseImage({
				count: 3, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], // 从相册选择
				success: (res) => {
					this.imgArr = res.tempFilePaths;
				},
			});
		},
	},
};
</script>

<style lang="scss">
.page-order-return {
	background: #f5f5f5;
	padding: 24rpx 32rpx;
	.module {
		margin: 0 0 24rpx;
	}
	.module-header {
		color: #888;
		padding: 0 0 8rpx;
		font-size: 26rpx;
		line-height: 1.8;
	}
	.module-input {
		.iconjiantou {
			float: right;
		}
		.input-select {
			background: #fff;
			padding: 20rpx;
			border: 1px solid #eee;
			border-radius: 10rpx;
		}
	}
	.input-textarea {
		background: #fff;
		width: 100%;
		border: 1px solid #eee;
		box-sizing: border-box;
		border-radius: 10rpx;
		min-height: 200rpx;
		padding: 16rpx;
		.uni-textarea-textarea {
			width: 100%;
		}
	}
	.uni-form-item {
		background: #fff;
		padding: 0;
		.title {
			width: 140rpx;
			padding: 20rpx 16rpx;
		}

		.uni-input {
			padding: 14rpx;
		}
	}
	.module-button {
		padding: $uni-spacing-lg 0;
	}
	.button-upload {
		background: #fff;
		width: 200rpx;
		height: 200rpx;
		font-size: 90rpx;
		line-height: 200rpx;
		text-align: center;
		border: 1px solid #eee;
		color: #999;
	}
	.module-image {
		display: flex;
		flex-wrap: wrap;
		.item {
			width: 1/3 * 100%;
			max-width: 1/3 * 100%;
			min-width: 1/3 * 100%;
			padding: 0 10rpx 20rpx;
			box-sizing: border-box;
		}
		.media-object {
			width: 100%;
		}
	}
}
</style>
